<template>
  <div class="addDialogCon">
    <el-dialog title="选择订单" :visible="showDialog" width="70%" :close-on-click-modal="false" @close="cancelFn">
      <el-table border ref="multipleTable" :data="gridData2" tooltip-effect="dark" style="width: 100%" class="tablebox"
        @selection-change="handleSelectionChange" @row-click="handlerClick" size="medium">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="commodityName" label="商品名称" align="center" />
        <el-table-column prop="barCode" label="商品条码" align="center" />
        <el-table-column prop="commodityStandard" label="规格" align="center" />
        <el-table-column prop="unitName" label="单位" align="center" />
        <el-table-column prop="manufactureTime" label="生产日期" align="center">
          <template v-slot="{ row }">
            <span>{{ row.manufactureTime | parseTime("YYYY-MM-DD") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="批次号" align="center" />
      </el-table>
      <span slot="footer">
        <el-button class="celBtn" @click="cancelFn">取 消</el-button>
        <el-button class="addBtn" @click="commitFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GoodsDialog",
  props: {
    showDialog: {
      default: false,
      type: Boolean,
    },
    gridData2: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
      detailsList: [],
      newDetailsList: [],
      checkoutList: [],
    };
  },
  watch: {
    showDialog(newValue, oldValue) {
      if(newValue){
        this.$nextTick(()=>{
          // 默认全选
          this.$refs.multipleTable.toggleAllSelection();
        })
        // this.checkoutList = [...this.gridData2];
        document.addEventListener('keyup',this.keyUp);
      }else {
        document.removeEventListener('keyup',this.keyUp)
      }
    }
  },
  methods: {
    handlerClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    keyUp(e){
      if(e.key === 'Enter'){
        this.commitFn();
      }
    },
    handleSelectionChange(val) {
      console.log(val, "val");
      this.checkoutList = val;
      // this.detailsList = []
      // this.detailsList.shift()
      // if (val.length > 0) {
      //   val.forEach(element => {
      //     // 去重
      //     if (this.detailsList.every(item => item.id !== element.id)) {
      //       this.detailsList.push(element)
      //     }
      //   })
      // }
      console.log(this.detailsList, "this.detailsList");
    },
    commitFn() {
      if (this.checkoutList.length > 0) {
        this.checkoutList.forEach((element) => {
          // 去重
          if (this.detailsList.every((item) => item.id !== element.id)) {
            this.detailsList.push(element);
          }
        });
      } else {
        return this.$message.warning("请选择要调拨的商品");
      }
      // 去除空数据
      this.newDetailsList = this.detailsList.filter((item) => item.id !== "");
      console.log(this.newDetailsLis, "this.newDetailsList");
      // if(this.newDetailsList.length === 0) return this.$message.warning('请选择要退的订单')
      this.$emit("commitFn", this.newDetailsList);
      this.$emit("update:showDialog", false);
    },
    cancelFn() {
      this.$emit("update:showDialog", false);
    },
    deleteFn(index, id) {
      // this.newDetailsList.splice(index, 1);
      console.log(index, "index");
      const index1 = this.detailsList.findIndex((item) => item.id === id);
      console.log(index1, "index1");
      this.detailsList.splice(index1, 1);
      console.log(this.newDetailsList, "this.newDetailsList");
      console.log(this.detailsList, "this.detailsList");
    },
  },
};
</script>

<style scoped lang="scss"></style>
